import { topAlarm } from "@/api/modules/iot/alarm";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import moment from "moment";
import CardHead from "./components/cardHead";
export default defineComponent({
	setup() {
		return () => {
			const proTable = ref<any>();
			const columns: ColumnProps[] = [
				{ type: "index", label: "排名", width: 100 },
				{ prop: "_id", label: "设备SN" },
				{ prop: "count", label: "告警数量" }
			];
			const dataCallback = (data: any) => {
				return {
					datalist: data.devAlarm
					// total: data.total || 0,
					// pageIndex: data.current,
					// pageSize: data.size
				};
			};
			const state = reactive<any>({
				timeRange: [moment().add(`-7`, "d").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]
			});
			const param = reactive({ topSize: 10, startTime: "", endTime: "" });
			const getTableList = async () => {
				param.startTime = state.timeRange[0] + " 00:00:00";
				param.endTime = state.timeRange[1] + " 23:59:59";
				return topAlarm(param);
			};
			//时间切换
			watch(
				() => state.timeRange,
				() => {
					proTable.value.getTableList();
				}
			);
			return (
				<div class="real-alarm-page ">
					<el-card
						v-slots={{
							header: () => (
								<div class="flex justify-between content-center">
									<span class="card-title">设备告警排行</span>
									<CardHead v-model:timeRange={state.timeRange}></CardHead>
								</div>
							)
						}}
						shadow="never"
						body-style={{ padding: 0 }}
					>
						<ProTable
							ref={proTable}
							columns={columns}
							requestApi={getTableList}
							dataCallback={dataCallback}
							toolButton={false}
							pagination={false}
						></ProTable>
					</el-card>
				</div>
			);
		};
	}
});
